<template>
  <div id="chartState" class="maxbox"></div>
</template>

<script>
let echarts = require("echarts");
export default {
    props:['counts'],
    components: {},
   
    data() {
        return {
            chart: null
        };
    },
    created() { },
    mounted() {
        this.$nextTick(() => {
            this.chart = echarts.init(document.getElementById('chartState'));
          
        });
    },
    methods: {
        refresh(){
            this.creatChart()
        },
        creatChart() {
            let option = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisLabel: { // X轴设置
                        textStyle: {
                            align: 'center',
                            fontSize: 12,
                            color: '#9b9ba6'
                            // fontWeight: 'bold'
                        }
                    },
                    axisTick: { show: false }, // 刻度
                    axisLine: { // 坐标轴轴线相关设置。
                        show: false
                    },
                    data: ['在线点位', '离线点位', '摄像机在线', '摄像机离线']
                },
                yAxis: {
                    type: 'value',
                    axisLine: { // 坐标轴轴线相关设置。
                        show: false
                    },
                    splitLine: { show: false },
                    axisLabel: {
                        show: false
                    }
                },
                series: [
                    {
                        data: this.counts,
                        type: 'bar',
                        barWidth: 30, // 柱图宽度
                        itemStyle: {
                            normal: {
                                // 好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                color: function(params) {
                                    // build a color map as your need.
                                    let colorList = ['#4bbaff', '#ffd54f', '#44ffa2', '#ff6148'];
                                    return colorList[params.dataIndex];
                                },
                                // 以下为是否显示，显示位置和显示格式的设置了
                                label: {
                                    show: true,
                                    color: '#fff',
                                    fontSize: 14,
                                    position: 'top',
                                    formatter: '{c}'
                                    // formatter: '{b}\n{c}'
                                }
                            }
                        }
                    }
                ]
            };

            
            this.chart.setOption(option);
        }
    }
};
</script>

<style lang="less" scoped>

</style>
